<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Id No</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <script type="text/javascript" src="/static/js/jquery-2.1.1.js"></script>
    <script type="text/javascript" src="/static/js/jquery.validate.js"></script>
    <script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
    <script>
        function idno(preIdNo) {
            var pw = 0
            var weighings = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
            var x_mod = [1, 0, 'x', 9, 8, 7, 6, 5, 4, 3, 2];
            for (var idx = 0; idx < preIdNo.length; idx++) {
                pw = pw + weighings[idx] * parseInt(preIdNo[idx])
            }
            return preIdNo + x_mod[pw % 11]
        }

        $(function () {
            $('#idNo_button').click(function () {
                $('#idNo_result').empty();
                $('#idNo_result').append(idno($('#preIdNo').val()));
            });
        });
    </script>
</head>
<body>

{% include "header.html" %}

<div class="tab-content" style="margin-top: 100px">
    <div id="IdNo" class="tab-pane active">
        <form class="form-horizontal" role="form" style="margin: 50px" id="myIdNo">
            <div class="form-group">
                <label for="preIdNo" class="col-sm-2 control-label">身份证号（前17位）：</label>

                <div class="col-xs-3">
                    <input class="form-control" id="preIdNo" name="preIdNo" type="text" maxlength="17">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" class="btn btn-primary" id="idNo_button">提交</button>
                    <span>（点击提交后，会根据前17位计算出正确的身份证号码）</span>
                </div>
            </div>
        </form>
        <div class="container" id="idNo_result" style="margin-left: 250px">
        </div>
    </div>
</div>
</body>
</html>